<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="vue.js"></script>
</head>

<body>
  <div id="app">
    <div class="container ">
      <div class="form-inline">
        <input type="text" v-model.trim="inputTxt" style="min-width:400px;margin-right:10px" class="form-control">
        <button class="btn btn-primary" @click="add">增加</button>
      </div>
      <hr>
      <p v-if="!lists.length">暂无留言</p>
      <ul v-else>
        <li v-for="(list,index) in lists">
          {{list}}
        </li>
      </ul>
    </div>

  </div>
  <script>
    let vm = new Vue({
      el:"#app",
      data:{
        inputTxt:"",
        lists:[]
      },
      methods:{
        add(){
          if(this.inputTxt == ""){
            return;
          }
          this.lists.unshift(this.inputTxt);
          this.inputTxt = "";
        }
      }
    })

    // var reg = /^\s|\s$/g;
  </script>
</body>

</html>